<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#div1{
			width:850px;
			height:500px;
			margin:100px auto;
			position: relative;
			overflow: hidden;
		}
		#div1 ul{
			display: flex;
			position: absolute;
			left: 0;
			top: 0;
		}
		#div1 ul li{
			height:500px;
		}
		#div1 ol{
			position: absolute;
			right: 10%;
			bottom: 10px;
			z-index:5;
		}
		#div1 ol li{
			width:20px;
			height:20px;
			background-color: aquamarine;
			margin-left: 5px;
			float: left;
			line-height: 20px;
			text-align: center;
			border-radius: 50%;
		}
		#div1 ol li.ac{
			background:red;
			color:#fff;
		}
		#div1>a{
			text-decoration: none;
			position: absolute;
			top:50%;
			margin-top:-10;
			height:40px;
			line-height: 32px;
			text-align: center;
			width:30px;
			font-size: 40px;
			/* vertical-align: middle; */
			color:#fff;
			background: rgba(0,0,0,0.5);
			z-index:5;
		}
		#div1 .goPrev{
			left:0;
		}
		#div1 .goNext{
			right:0;
		}
		img{
			width:850px;
			height:500px;
		}
	</style>
</head>
<script src="./js/jquery-3.5.1.min.js"></script>
<body>
	<div id="div1">
		<ul>
			<li><img src="img/1.jpg"></li>
			<li><img src="img/2.jpg"></li>
			<li><img src="img/3.jpg"></li>
			<li><img src="img/4.jpg"></li>
			<li><img src="img/5.jpg"></li>
		</ul>
		<ol>
		</ol>
		<a href="javascript:;" class="goPrev">&laquo;</a>
		<a href="javascript:;" class="goNext">&raquo;</a>
	</div>
	<script>
		class Carousel{
			constructor (){
				this.$ul = $('#div1 ul')
				this.$imgs = $('#div1 ul li')
				this.$ol = $('#div1 ol')
				this.$goPrev = $('#div1 .goPrev')
				this.$goNext = $('#div1 .goNext')
				this.len = this.$imgs.length
				this.width = this.$imgs.outerWidth()
				this.index = 0 //当前的索引
				this.lastIndex = 0  //上一次的索引
				
				this.init()
				this.btnClick()
				this.nextClick()
				this.lastClick()
			}
			init(){
				this.$imgs.eq(0).clone().appendTo(this.$ul)			
				this.$ul.width((this.len+1)*this.width)
				for(var i=0;i<this.len;i++){
					$('<li>').html(i+1).addClass(i===0?'ac':'').appendTo(this.$ol)
				}
			}
			btnClick(){
				const _this = this
				this.$btns = this.$ol.children()
				this.$btns.on('click',function(){
					_this.lastIndex = _this.index//先把当前值变为上一次的值
					_this.index = $(this).index()
					_this.$btns.eq(_this.lastIndex).removeClass('ac')
					_this.$btns.eq(_this.index).addClass('ac')
					_this.$ul.animate({
						left:-_this.index*_this.width
					})
				})
			}
			nextClick(){
				this.$goNext.on('click',()=>{
					this.lastIndex = this.index
					this.index++
					if(this.index === this.len){
						this.index = 0
						this.$ul.animate({
							left:-this.len*this.width
						},()=>{
							this.$ul.css('left',0)
						})
					}else{
// 						this.$btns.eq(this.lastIndex).removeClass('ac')
// 						this.$btns.eq(this.index).addClass('ac')
						this.$ul.animate({
							left:-this.index*this.width
						})
					}
					this.$btns.eq(this.lastIndex).removeClass('ac')
					this.$btns.eq(this.index).addClass('ac')
				})
			}
			lastClick(){
				this.$goPrev.on('click',()=>{
					this.lastIndex = this.index
					this.index--
					if(this.index === -1){
						this.index = this.len-1
						this.$ul.css('left',-(this.len-1)*this.width)
					}else{
			// 			this.$btns.eq(this.lastIndex).removeClass('ac')
			// 			this.$btns.eq(this.index).addClass('ac')
						this.$ul.animate({
							left:-this.index*this.width
						})
					}
					this.$btns.eq(this.lastIndex).removeClass('ac')
					this.$btns.eq(this.index).addClass('ac')
				})
			}
			
		}
		new Carousel()
	</script>
</body>
</html>